<!-- 引用仓储费 -->
<template>
  <el-dialog
    v-model="visibility"
    title="引用"
    append-to-body
    width="60%"
    draggable
    :close-on-click-modal="false">
    <Table
      :data="tableData"
      v-loading="tableLoading">
      <el-table-column
        prop="name"
        label="仓储费名称"
        :resizable="false" />
      <el-table-column
        prop="storageChargeFee"
        label="仓储费（元/吨）"
        :resizable="false" />
      <el-table-column
        prop="isTimeSection"
        label="是否按照时间段"
        :resizable="false">
        <template #default="scope">
          <span>{{ scope.row.isTimeSection ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
        :resizable="false">
        <template #default="scope">
          <el-button
            type="primary"
            @click="select(scope.row)">
            {{ config.button.text.quote }}
          </el-button>
        </template>
      </el-table-column>
    </Table>

    <template #footer>
      <div>
        <el-button @click="visibility = false">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import config from "@/common/element-plus/config";
import Table from "@/components/Table.vue"
import ApiBaseCapitalWarehouse from "@/api/modules/capital-ware-house"

const visibility = ref(false);
const tableData = ref([]);
const tableLoading = ref(false);

const props = defineProps(["baseCapitalWarehouseId"])
const emits = defineEmits(["selected"])

// 引用仓储费
const select = (row) => {
  emits("selected", row);
}

// 获取仓储费列表
const getStorageChargeList = async (id) => {
  if (id) {
    tableLoading.value = true;
    const res = await ApiBaseCapitalWarehouse.getStorageChargeList({ baseCapitalWarehouseId: id }, {
      pageNum: 1,
      pageSize: -1,
    });
    tableData.value = res.data.records;
    tableLoading.value = false;
  } else {
    tableData.value = [];
  }
}

watch(() => visibility.value, (newVal) => {
  if (newVal) {
    getStorageChargeList(props.baseCapitalWarehouseId)
  }
})

defineExpose({ visibility })
</script>

<style lang="scss"></style>